// 封装

// 获取DOM元素对象 - getElementById方法
function byId(id) {
  // 判断传入的ID是否为字符串, 是的话返回元素的DOM对象, 否则返回ID本身
  return typeof(id) === "string" ? document.getElementById(id) : id;
}

/*通用事件绑定方法 - 解决各类浏览器事件绑定的方法
      参数一：element(绑定事件的DOM元素)
      参数二：事件名
      参数三：事件处理程序*/
function addHandler(element, type, handler) {
  // 非IE浏览器 - 支持DOM2级
  if(element.addEventListener) {
    element.addEventListener(type, handler, true)
    // 高版本IE浏览器 - 支持DOM2级
  }else if(element.attachEvent) {
    element.attachEvent("on" + type, handler)
    // 低版本IE浏览器 - 仅支持DOM0级
  }else {
    // 事件名为变量, 不能直接用element.type
    // 任何用点的地方都可以用[]拉取代
    element["on" + type] = handler
  }
}

// 切换图片
function changeImg() {
  // 遍历所有图片, 将图片隐藏, 将小圆点样式清除
  for(var i = 0; i < size; i++) {
    pics[i].style.display = "none";
    dots[i].className = "";
  }
  // 显示当前图片
  pics[index].style.display = "block";
  // 当前小圆点选中样式
  dots[index].className = "active";
}

// 自动轮播
function startAutoPlay() {
  timer = setInterval( function() {
    index++;
    if( index >= size ) index = 0;
    // console.log( index )
    changeImg();
  }, 2000 )
}

// 清除自动轮播
function stopAutoPlay() {
  // 如果timer为真
  if(timer) {
    clearInterval( timer );
  }
}



// 声明全局变量

// 当前轮播图片的索引值, 默认值为0
var index = 0;
    prev = byId( "prev" ),  // 上一张
    next = byId( "next" ),  // 下一张

    pics = byId( "banner" ).getElementsByTagName( "div" ),  // 获取banner的div元素
    size = pics.length;  // 获取div(轮播图片)的个数
    // console.log( size )

    dots = byId( "dots" ).getElementsByTagName( "span" ),  // 获取banner的span元素

    timer = null,  // 定时器

    main = byId( "main" ),  // 轮播主体区域

    menuBox = byId( "menu-box" ),  // 左侧菜单栏

    menuContent = byId( "menu-content" ),  // 一级菜单
    menuItems = byId("menu-content").getElementsByTagName("div"),    // 一级菜单内容

    subMenu = byId( "sub-menu" ),  // 二级菜单
    subItems = subMenu.getElementsByClassName("inner-box"),    // 二级菜单内容



// 绑定事件

// 点击下一张按钮显示下一张图片
// 非IE不用onclick
/* next.onclick = function() {
    alert( "1" )
   });*/

/* next.addEventListener( "click", function() {
  alert( "1" )
});

next.addEventListener( "click", function() {
  alert( "2" )
}); */

/* addHandler(next, "click", function() {
  // alert( "1" )

  // 点击next按钮, 轮播图片索引值递增
  index++;

  // 如果索引值大于等于3, 索引值归零
  // if( index >= 3 ) index = 0;
  if( index >= size ) index = 0;
  // console.log( index )

  // 隐藏已有的轮播图片
  // pics[0].style.display = "none";
  // pics[1].style.display = "none";
  // pics[2].style.display = "none";
 for(var i = 0; i < size; i++) {
  //  隐藏所有轮播图片
  pics[i].style.display = "none";
  // 清空所有轮播图小圆点的样式
  dots[i].className = ""
 }

  // 显示当前索引值的轮播图片
  pics[index].style.display = "block";
  // 轮播图的对应小圆点变为选中状态
  dots[index].className = "active"
}) */

/* addHandler(next, "click", function() {
  alert( "2" )
}) */

// 点击上一张按钮显示上一张图片
addHandler(prev, "click", function() {
  index--;
  if( index < 0 ) index = size - 1;
  // 切换图片方法
  changeImg();
})

// 点击下一张按钮显示下一张图片
addHandler(next, "click", function() {
  index++;
  if( index >= size ) index = 0;
  // 切换图片方法
  changeImg();
})

// 点击小圆点索引切换图片
for( var d = 0; d < size; d++ ) {
  // 自定义给DOM元素添加DOM属性
  // id是标准的HTML属性
  dots[d].id = d;
  // => span[0] = 0; span[1] = 1; span[2] = 2;

  // 非标准的HTML属性需要用到setAttribute
  dots[d].setAttribute( "data-id", d );

  // dots是数组, 所有需要给dots的索引值元素绑定事件
  addHandler( dots[d], "click", function() {
    // 作用域问题, 导致d循环到3的时候停止, 所以d得到的永远是3
    // alert( d )
    // alert( this.id )
    // alert( this.getAttribute( "data-id" ) )
    // 将小圆点的索引值 赋值给 图片的索引值
    index = this.getAttribute( "data-id" );
    // 切换图片的方法
    changeImg();
  } )
}

// 自动轮播方法
startAutoPlay();

// 鼠标移入banner区域, 图片停止自动轮播
addHandler(main, "mouseover", stopAutoPlay);
// 鼠标移除banner区域, 图片 自动轮播
addHandler(main, "mouseout", startAutoPlay);


// 遍历出所有的一级菜单
for(var m = 0, idx, mlen = menuItems.length; m < mlen; m++){

  // 给所有一级菜单定义属性id, 标明它的索引值
  menuItems[m].setAttribute( "data-index", m )

  // 鼠标移入当前一级菜单, 显示对应的二级菜单
  addHandler( menuItems[m], "mouseover", function(){
    // alert("m")

    // 鼠标移入一级菜单, 显示二级菜单内容
    subMenu.style.display = "block";

    // 获取当前一级菜单的索引
    idx = this.getAttribute( "data-index" );

    // 遍历所有的二级菜单innerBox, 将它们隐藏
    for( var j = 0, jlen = subItems.length; j< jlen; j++){
      // 隐藏所有的二级菜单
      subItems[j].style.display = "none";
      // 一级菜单的背景默认为空
      menuItems[j].style.background = "none";
    }

    // 显示当前索引值的二级菜单内容
    subItems[idx].style.display = "block";
    // 将一级菜单的背景高亮
    menuItems[idx].style.background = "rgba(0, 0, 0, 0.1)";
  })


    // 鼠标移出当前一级菜单, 将一级菜单背景隐藏
    addHandler( menuItems[m], "mouseout", function(){
      idx = this.getAttribute( "data-index" );
      menuItems[idx].style.background = "none";
    })
}

// 鼠标移出左侧菜单栏, 二级菜单隐藏
addHandler( menuBox, "mouseout", function(){
  // alert("m")
  subMenu.style.display = "none";
})

// 鼠标移入二级菜单时, 二级菜单显示
addHandler( subMenu, "mouseover", function(){
  subMenu.style.display = "block";
})